<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#div1{
				width: 200px;
				height: 200px;
				border: 1px solid red;
				
				/*margin是容器与外边或其他容器的间距*/
				/*将div向右移动200px应该怎么写？
				margin-left: 200px;*/
				
				/*将div同时向下向右移动200px，应该怎写？
				margin: 200px 0px 0px 200px;*/
				
				/*当margin只设定一个值的时候，上右下左四个方向都生效
				margin: 100px;*/
				
				/*当值设定为两个值的时候，第一个值设定上下的间距，第二个值设定左右的间距
				margin: 50px 100px;*/
				
				/*当值设定为三个值的时候，第一个值设定为上外边距，第二个值设定左右外边距，第三个值设定下外边距*/
				
				float: left;
			}
			
			#div2{
				width: 200px;
				height: 200px;
				border: 1px solid red;
				/*float是浮动属性，用于解决块级元素不在同一行的问题
				 属性值:right向右浮动*/
				float: left;
			}
			
			
		</style>
	</head>
	<body>
		<div id="div01">
			<div id="div1">范冰冰</div>
		    <div id="div2">罗拉</div>
		</div>
		
	</body>
</html>